<script>
let MyChart = null;
function RenderChart(category) {
  if (MyChart) {
    MyChart.dispose();
    MyChart = null;
  }
  MyChart = echarts.init(document.getElementById('Section-id-2'));
  const option = {
    color: ['rgb(55, 236, 63)'],
    tooltip: {},
    radar: {
      axisName: {
        fontSize: '1.6rem',
        color: '#6D7278',
        fontFamily: 'ALIBABAPUHUI-REGU',
        // formatter(value, indicator) {
        //   return `${value}(${indicator.value})`
        // }
      },
      axisLine: {
        lineStyle: {
          color: '#ebeef3',
        },
      },
      center: ['50%', '50%'],
      radius: '61.8%',
      triggerEvent: false,
      indicator: category,
    },
    series: [
      {
        name: '换热站异常监测',
        type: 'radar',
        symbolSize: 7,
        areaStyle: {
          color: {
            type: 'radial',
            x: 0.5,
            y: 0.5,
            r: 0.5,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(137, 190, 252, 0.05)', // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(55, 236, 63, 0.9)', // 100% 处的颜色
              },
            ],
          },
        },
        lineStyle: {
          width: 2
        },
        data: [
          {
            value: category.map(v => {
              return v.value
            }),
            label: {
              show: true,
              position: 'right',
              fontWeight: 'bold',
              formatter: function (params) {
                return params.value;
              }
            },
            name: '热源站异常监测',
          },
        ],
      },
    ],
  };
  MyChart.setOption(option);
}
function getRandomData(min, max) {
  return parseInt((max - min) * Math.random() + min)
}
export default {
  name: "section-2",
  components: {
  },
  data() {
    return {
    };
  },
  computed: {
  },
  watch: {},
  mounted() {
    this.initData()
  },
  beforeUnmount() {
    if (MyChart) {
      MyChart.dispose();
      MyChart = null;
    }
  },
  methods: {
    initData() {
      const category = [
        {

          name: '一供温度异常',
          value: getRandomData(110, 120)
        },
        {

          name: '一供压力异常',
          value: getRandomData(110, 120)
        },
        {

          name: '一回温度异常',
          value: getRandomData(100, 120)
        },
        {

          name: '一回压力异常',
          value: getRandomData(110, 120)
        },
        {

          name: '二供温度异常',
          value: getRandomData(110, 120)
        },
        {

          name: '二供压力异常',
          value: getRandomData(60, 120)
        },
        {

          name: '二回温度异常',
          value: getRandomData(110, 120)
        },
        {

          name: '二回压力异常',
          value: getRandomData(110, 120)
        },
      ]
      let max = Math.max.apply(null, category.map(v => v.value));
      category.forEach(v => {
        v.min = 0;
        v.max = max + 10;
      })
      RenderChart(category)
    },
    refreshData() {
      this.initData();
    }
  },
};
</script>

<template>
  <div class="main-card">
    <div class="main-header">
      <span class="main-title font-alimamashuheiti">
        换热站异常监测
      </span>
      <div class="main-function-area">
        <el-icon @click="refreshData" class="cursor-pointer">
          <Refresh />
        </el-icon>
      </div>
    </div>
    <div id="Section-id-2">

    </div>
  </div>
</template>
<style></style>
<style lang="less">
.main-card {
  border: 1px solid #e4e7ed;
  border-radius: .3rem;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  &>.main-header {
    font-size: 2rem;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;

    &>.function-area {
      display: flex;
      align-items: center;
    }
  }
}

#Section-id-2 {
  min-height: 37rem;
}
</style>
